<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css"/>
</head>
<style>
    /*  重构了css*/

    .aui-col-xs-3 img {
        right: 0;
        width: 33%;
        top: 0;
        border-radius: 50%;
    }

</style>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">商城</div>
</header>

<section class="aui-grid">
    <div class="row aui-text-center" id="demoaaa">
        <script id="Category-template" type="text/x-dot-template">
            {{ for(var i=0; i < 8; i++) { }}
        <div class="aui-col-xs-3">
            <img src="{{='https://fuss10.elemecdn.com'+it[i].image_url}}" alt="">
            <p>
                {{=it[i].title}}
            </p>
        </div>
            {{}}}
        </script>
        <div id="Category-content"></div>
    </div>
</section>
<!--
<div id="aui-slide">
    <div class="aui-slide-wrap">
        <div class="aui-slide-node">
            <section class="aui-grid">
                <div class="row aui-text-center">
                    {{ for(var i=0; i < it.length; i++) { }}
                    <div class="aui-col-xs-3"
                         onclick="">
                        <img src="{{=it[i].image_url}}" alt="">
                        <p>
                            {{=it[i].name}}
                        </p>
                    </div>
                    {{}}}
                </div>
            </section>

        </div>


    </div>
    <div class="aui-slide-page-wrap"><!--分页容器-></div>
</div>
-->

<footer class="aui-bar aui-bar-tab aui-border-t" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">外卖</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">搜索</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-badge">99</div>
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">订单</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-dot"></div>
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        getCategory()
    });
    var slide = new auiSlide({
        container: document.getElementById("aui-slide"),
        // "width":300,
        "height": 260,
        "speed": 300,
        "autoPlay": 3000, //自动播放
        "pageShow": true,
        "pageStyle": 'dot',
        "loop": true,
        'dotPosition': 'center',
        currentPage: currentFun
    })

    function currentFun(index) {
        console.log(index);
    }
    var slide2 = new auiSlide({
        container: document.getElementById("aui-slide2"),
        // "width":300,
        "height": 240,
        "speed": 300,
        "autoPlay": 0, //自动播放
        "pageShow": true,
        "loop": true,
        "pageStyle": 'dot',
        'dotPosition': 'center'
    })
    var slide3 = new auiSlide({
        container: document.getElementById("aui-slide3"),
        // "width":300,
        "height": 240,
        "speed": 500,
        "autoPlay": 3000, //自动播放
        "loop": true,
        "pageShow": true,
        "pageStyle": 'line',
        'dotPosition': 'center'
    })
    console.log(slide3.pageCount());
    function getCategory() {
        var settings = {
            type: "GET",
            url: common_api + '/v2/index_entry',
            dataType: "json",
            error: function (XHR, textStatus, errorThrown) {
                console.log("XHR=" + XHR + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);

            },
            success: function (data, textStatus) {
                $("body").append(data);
                console.log(JSON.stringify(data));    //控制台输出,多用于 调试
                //alert(JSON.stringify(data))


                 var content = $api.byId('Category-content');
                 var tpl = $api.byId('Category-template').text;
                 var tempFn = doT.template(tpl);
                 content.innerHTML = tempFn(data);



            },
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                //  "Session-Token" : '',
                //  "Principal-JTL-Id" : '',
                //"Principal-JTL-Key" : ''
            }
        };
        $.ajax(settings);
    }
</script>
</html>